அடுத்தது

Angular Null-Safe Navigation (?.)

?. மற்றும் ?? உடன் விருப்ப மதிப்புகளை பாதுகாப்பாகப் படித்தல்

பூஜ்யம்-பாதுகாப்பான நாவிகேஷன் (?.) என்றால் என்ன?

?. பிழைகளை வீசாமல் காணாமல் போகக்கூடிய மதிப்புகளைப் படிக்கிறது.

எந்த பகுதியும் null அல்லது undefined ஆக இருந்தால், முடிவு undefined ஆகும்.

டெம்ப்ளேட்டுகளில் ஆழமான பண்பு பாதைகளுக்கான பாதுகாப்பை மேம்படுத்துகிறது.

user

பயனர் பொருள்

profile

சுயவிவர பொருள்

email

மின்னஞ்சல் பண்பு

பாதுகாப்பான அணுகல்:

user?.profile?.email என்றால்: user இருந்தால், profile இருந்தால், email ஐப் படிக்கவும். எதுவும் இல்லையென்றால், undefined திரும்பவும் (பிழை இல்லை).

எப்போது பூஜ்யம்-பாதுகாப்பான நாவிகேஷனைப் பயன்படுத்துவது

அசிங்க்ரோன் அல்லது விருப்ப தரவு

பண்புகள் இல்லாமல் இருக்கக்கூடிய தரவு

{{ apiData?.results }}

?. (விருப்ப சங்கிலி)

சொல்லாட்சி சோதனைகளை விட

user?.address?.city

?? உடன் இணைக்கவும்

இயல்புநிலை மதிப்புகளை வழங்க

value ?? 'இயல்புநிலை'

சிறந்த நடைமுறை:

வினாடி சோதனைகளை விட ?. (மற்றும் குறியீட்டில் விருப்ப சங்கிலி) பயன்படுத்தவும். இயல்புநிலை மதிப்புகளை வழங்க ?? உடன் இணைக்கவும்.

எடுத்துக்காட்டு

உங்கள் சொந்த Angular சேவையகத்தைப் பெறுங்கள்:

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
    
Email: {{ user?.profile?.email || '(none)' }}

  `
})
export class App {
  user: { profile?: { email?: string } } | undefined = undefined;
  toggle() {
    this.user = this.user ? undefined : { profile: { email: 'a@example.com' } };
  }
}

bootstrapApplication(App);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Angular App</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

நேரடி டெமோ:

பூஜ்யம்-பாதுகாப்பான நாவிகேஷன் டெமோ

பயனர்: வரையறுக்கப்படவில்லை

மின்னஞ்சல்: (எதுவும் இல்லை)

பாதை அணுகல்: user?.profile?.email

முடிவு: undefined

எடுத்துக்காட்டு விளக்கம்

கூறு விளக்கம் எடுத்துக்காட்டு
விருப்ப சங்கிலி (?.) user?.profile?.email user மற்றும் profile வரையறுக்கப்பட்டால் மட்டுமே email ஐப் படிக்கிறது; இல்லையெனில் முழு வெளிப்பாடும் undefined (பிழை இல்லை) {{ user?.profile?.email }}
பின்வாங்கல் (||) || '(none)' வெளிப்பாடு பொய்யாக இருக்கும்போது ஒரு பொருளிடத்தைக் காட்டுகிறது; 0 அல்லது வெற்று சரங்களை சரியானதாகக் கருத விரும்பும்போது ?? ஐ விரும்புகிறது {{ value || 'இயல்புநிலை' }}
மாற்று "Toggle user" ஐக் கிளிக் செய்வது user ஐ undefined மற்றும் ஒரு பொருள் இடையே மாற்றுகிறது பாதுகாப்பான அணுகலை நிரூபிக்க (click)="toggle()"
பூஜ்ய ஒன்றிணைத்தல் (??) 0 அல்லது '' போன்ற சரியான பொய் மதிப்புகளை வைத்திருக்க விரும்பும் போது a || b க்கு மேல் a ?? b ஐப் பயன்படுத்தவும் {{ value ?? 'இயல்புநிலை' }}

|| vs ?? வேறுபாடு:

|| (OR): எந்த பொய் மதிப்புக்கும் (false, 0, '', null, undefined) இயல்புநிலையை வழங்குகிறது
?? (பூஜ்ய ஒன்றிணைத்தல்): null அல்லது undefined இற்கு மட்டும் இயல்புநிலையை வழங்குகிறது
0 || 'இயல்புநிலை' → 'இயல்புநிலை'
0 ?? 'இயல்புநிலை' → 0

பயிற்சி

உங்கள் அறிவைச் சோதிக்க இந்தப் பயிற்சியை முயற்சிக்கவும்:

❓Angular டெம்ப்ளேட்டுகளில் பூஜ்யம்-பாதுகாப்பான நாவிகேஷன் ஆபரேட்டர் (?.) என்ன செய்கிறது?

பொய்யாக இருக்கும் போது மதிப்புகளை null ஆக மாற்றுகிறது
✗ தவறானது! ?. ஆபரேட்டர் மதிப்புகளை மாற்றாது, பாதுகாப்பாக அணுக மட்டுமே உதவுகிறது.
பூஜ்ய மதிப்புகளில் மாற்றம் கண்டறிதலைத் தூண்டுகிறது
✗ தவறானது! ?. ஆபரேட்டர் மாற்றம் கண்டறிதலைத் தூண்டாது, இது பாதுகாப்பான அணுகல் மட்டுமே.
சாத்தியமான null/undefined மதிப்புகளை அணுகும் போது பிழைகளைத் தடுக்கிறது
✓ சரி! பூஜ்யம்-பாதுகாப்பான நாவிகேஷன் ஆபரேட்டர் (?.) ஆழமான பண்பு பாதைகளைப் படிக்கும்போது பிழைகளைத் தடுக்கிறது. எந்தப் பகுதியும் null அல்லது undefined ஆக இருந்தால், அது undefined திரும்புவதோடு நிறுத்துகிறது, பிழையை வீசாது.

பிழை தடுப்பு:

?. ஆபரேட்டர் பொதுவான "Cannot read property 'x' of undefined" பிழைகளைத் தடுக்கிறது. இது குறிப்பாக அசிங்க்ரோன் தரவு அல்லது விருப்பமான கட்டமைப்புகளுடன் பணிபுரியும் போது பயனுள்ளதாக இருக்கும், அங்கு பண்புகள் எப்போதும் இருக்காது.

அடுத்தது